<template>
  <a-modal
    :visible="showModal"
    ok-text="保存"
    @ok="onSaveModal()"
    @cancel="close()"
  >
    <template #title> 新建流程分类 </template>
    <div>
      <a-form :model="modal" :rules="rules" ref="modalFormRef">
        <a-form-item field="name" label="分类名称" required="">
          <a-input
            v-model="modal.name"
            :max-length="16"
            placeholder="请输入流程分类名称"
          />
        </a-form-item>
        <a-form-item field="remark" label="备注" required="">
          <a-textarea
            v-model="modal.remark"
            placeholder="请填写备注"
            :auto-size="{
              minRows: 2,
              maxRows: 5,
            }"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, toRaw } from "vue";
import { Notification } from "@arco-design/web-vue";
import FlowManApi from "@/api/FlowManApi";

let emits = defineEmits(["ok"]);
const props = defineProps({
  modal: { type: Object, default: {} },
});

let showModal = ref(false);
const modalFormRef = ref();
const rules = ref({
  name: { required: true, message: "分组名称不能为空", minLength: 1 },
  remark: { required: true, message: "备注不能为空", minLength: 1 },
});
const onSaveModal = () => {
  modalFormRef.value.validate((err) => {
    if (err) return;
    FlowManApi.saveOrUpdateGroup(toRaw(props.modal)).then((resp) => {
      if (resp.code == 1) {
        emits("ok", resp.data);
        Notification.success("新建成功");
      }
    });
    close();
  });
};
const show = () => {
  showModal.value = true;
};
const close = () => {
  showModal.value = false;
  modalFormRef.value.resetFields();
};

defineExpose({ show, close });
</script>
